<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        font-size: 9.25925925925926vw;
        height: 100%;
    }

    header {
        width: 100%;
        height: 1.84rem;
        background: pink;
    }

    header>p {
        width: 100%;
    }

    header>p:nth-of-type(1) {
        padding-top: .20rem;
        text-align: center;
        font: 900 .70rem/1rem "宋体";

    }

    header>p:nth-of-type(2) {
        text-align: center;
        font: .40rem/.40rem "宋体";
    }




    main {


        /* -webkit-filter :blur(50px); */
        width: 100%;
        height: 15.87rem;
        position: relative;
    }

    main>div {
        width: 8rem;
        background: transparent;
        height: 8rem;
        border-radius: 50%;
        border: .05rem solid #ccc;
        background: black;
        position: absolute;
        top: 2.94rem;
        left: 1.35rem;
        animation: xuanzhuan 5s linear infinite;
        animation-play-state: paused;
        z-index: 10;
    }

    div>img {
        border-radius: 50%;
        width: 70%;
        height: 70%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 99;
    }

    main>p {
        background: url(./img/wsc.jpg) no-repeat;
        background-size: cover;
        width: 100%;
        height: 100%;
        /* background: transparent; */
        -webkit-filter: blur(30px);
    }

    @keyframes xuanzhuan {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* section */
    section {
        height: 1.5rem;
        width: 100%;
        background-color: transparent;
        position: relative;
    }

    section div {
        height: .02rem;
        width: 7.44rem;
        border: .01rem solid #ccc;
        background-color: gray;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;   
        bottom: 0;
        margin: auto;

    }

    section div p {
        width: 0;
        height: 100%;
        background-color: red;
        pointer-events: none;
    }

    section div span {
        position: absolute;
        background-color: black;
        width: .18rem;
        height: .18rem;
        border-radius: .09rem;
        top: -.08rem;
    }

    section>span:nth-of-type(1) {
        position: absolute;
        top: .66rem;
        left: .80rem;
        font: .20rem/.20rem "";
    }

    section>span:nth-of-type(2) {
        position: absolute;
        top: .66rem;
        right: .80rem;
        font: .20rem/.20rem "";
    }

    /* footer */
    footer {
        width: 100%;
        height: 1.5rem;
        background-color: rgba(01, 200, 70, .1);
        display: flex;
        justify-content: center;
        overflow: hidden;

    }

    footer>div {
        width: 1.40rem;
        height: 1.40rem;
        border: .05rem #ccc solid;
        border-radius: 50%;
        font: .5rem/1.40rem "";
        color: red;
        text-align: center;
    }
    audio{
        display: none;
    }
</style>

<body>
    <header>
        <p>拥抱</p>
        <p>歌手</p>
    </header>
    <main>
        <p></p>
        <div>
            <img src="./img/wsc.jpg" alt="">
        </div>
    </main>
    <section>
        <span>00:00</span>
        <div>
            <p></p>
            <span>
            </span>
        </div>
        <span>4:21</span>
    </section>
    <footer>
        <div>开始</div>
    </footer>
    <audio src="./AaronicStuff - Take a Walk (A Cappella).mp3" controls></audio>



    <script>
        window.onload = function () {
        var audio = document.querySelector("audio")
        var divObj = document.querySelector("footer div")
        var jinduObj = document.querySelector("section div")
        var pObj = document.querySelector("section div p")
        var spanObj = document.querySelector("section>div>span")
        jinduObj.onmousedown = function (evt) {
            var e = evt || window.event
            var data = ((e.clientX - jinduObj.offsetLeft) / jinduObj.offsetWidth)
            console.log(data)
            console.log(jinduObj.offsetWidth,jinduObj.offsetLeft)

            audio.currentTime = data * audio.duration
            pObj.style.width = ((audio.currentTime/audio.duration)*jinduObj.offsetWidth/100)+ "rem"
            spanObj.style.left = ((audio.currentTime/audio.duration)*jinduObj.offsetWidth/100)+ "rem"
            console.log(pObj.style.width);
            console.log(spanObj.style.left);
        }
        divObj.onclick = function () {
            var xuanzhuan = document.querySelector("main div")
            var set1
            if (divObj.innerText == "开始") {
                divObj.innerText = "暂停"
                xuanzhuan.style.animationPlayState = "running";
                audio.play()
                set1 = setInterval(function () {
                    pObj.style.width = (((audio.currentTime / audio.duration) * jinduObj.offsetWidth) / 100) + "rem"
                    spanObj.style.left = (((audio.currentTime / audio.duration) * jinduObj.offsetWidth) / 100) + "rem"
                }, 10)

            } else if (divObj.innerText == "暂停" ) {
                divObj.innerText = "开始"
                xuanzhuan.style.animationPlayState = "paused";
                audio.pause()
            }
        }
        var span2 = document.querySelector("section>span:nth-of-type(2)")
        console.log(span2)
        if (audio != null) {
            var duration;
            audio.load();
            audio.oncanplay = function () {
                span2.innerText = parseInt(parseInt(audio.duration) / 60) + ":" + parseInt(audio.duration) % 60
            }
        }




        function move(div, curs) {
        div.addEventListener('touchstart', function (evt) {
            let e = evt || window.event;
            let touch = e.targetTouches[0];
            oL = touch.clientX - div.offsetLeft;
            document.addEventListener("touchmove", defaultEvent, {passive:false});
        }, {passive:false})

        div.addEventListener('touchmove', function (evt) {
            let e = evt || window.event;
            let touch = e.targetTouches[0];
            let oLeft = touch.clientX-jinduObj.offsetLeft;
            if(oLeft<=0){
                oLeft=0
            }else if(oLeft>=jinduObj.offsetWidth){
                oLeft=jinduObj.offsetWidth
            }
            audio.pause()
            audio.currentTime = (oLeft/jinduObj.offsetWidth)*audio.duration;
            curs.style.width = oLeft / 100 + 'rem';
            div.style.left = oLeft / 100 + 'rem';
            
        }, {passive:false})


        div.addEventListener('touchend', function () {
            audio.play()
            document.removeEventListener("touchmove", defaultEvent, {passive:false});
        }, {passive:false})

        function defaultEvent(e) {
            e.preventDefault();
        }
    }
move(spanObj,pObj)
        }
    </script>

</body>

</html>